<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03-其他选择器</title>
    <script src="../js/jquery-3.6.0.js"></script>
    <script>
      /*
            $(this)  选取当前的元素
            $("p.intro") 选择class为intro的p元素
            $("p:first") 选取第一个p元素
            $("p:last") 选取最后一个p元素
            $("[href]") 选取带有href属性的元素
            $("[href=]") 选取带有href并属性值等于某个值的元素
            $("a[target=’_blank’]") 选取a标签中有target属性并且属性值为_blank的元素
            $(":button") 选取页面所有的button元素
            $("select :selected")选取select中被选中的元素
            $(":checked") 选取页面所有的被选中的元素
            $("tr:even") 选取所有偶数位的tr元素
            $("tr:odd")选取所有奇数位的tr元素
      */
      /*设置所有元素隐藏*/
      $(function () {
        $("button:first").click(function () {
          $("*").hide();
        });

        /*设置当前被点击元素背景为绿色*/
        $("button[name=btn2]").click(function () {
          $(this).css("backgroundColor","green");
        });

        /*点我隐藏第一个和最后一个p标签元素*/
        $("#btn3").click(function () {
          $("p:first,p:last").hide();
        });

        /*点我隐藏所有被选中的input标签元素*/
        $("button").eq(3).click(function () {
          $("input:checked").hide();
        });
        
        /*点我隐藏奇数位input标签*/
        $("button:last").click(function () {
          $("input:odd").hide();
        });

      })


    </script>
</head>
<body>
<p id="p1">段落1</p>
<p class="test">段落2</p>
<p class="test">段落3</p>
<p class="test">段落4</p>
<p value="12">段落5</p>
<hr>
<input type="checkbox" name="hobby"> 唱歌
<input type="checkbox" name="hobby"> 跳舞
<input type="checkbox" name="hobby"> rap
<input type="checkbox" name="hobby"> 篮球
<hr>
<select name="book" id="sel">
  <option value="0">Java</option>
  <option value="1" selected>C++</option>
  <option value="2">Python</option>
  <option value="3">Html</option>
</select>
<hr>
<input type="checkbox" name="address"> 武汉
<input type="checkbox" name="address"> 北京 <br>
<button class="btn1">设置所有元素隐藏</button>
<button name="btn2">设置当前被点击元素背景为绿色</button>
<button id="btn3">点我隐藏第一个和最后一个p标签元素</button>
<button id="btn4">点我隐藏所有被选中的input标签元素</button>
<button id="btn5">点我隐藏奇数位input标签</button>
</body>
</html>